<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            border-radius: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
            font-size: 30px;
            background: red;
            margin: 300px auto 10px;
        }
        .div2{
            width: 100px;
            height: 100px;
            margin: 10px auto;
            text-align: center;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>

        <!--
             v-on: 可以监听页面上的事件, 然后监听到之后, 把方法触发到对应Vue对象中
        -->

    <div id="root">

        <div class="div1">
            {{userName}}
        </div>
        <div class="div2">
            <button v-on:click="getname">点名</button>
            <button @click="getname">点名</button>
        </div>

    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                userName: "未开始",
                list: ["zs", "ls", "wu", "zl"]
            },
            methods: {
                getname: function () {
                    if (this.list.length < 1){
                        alert("点名结束, 刷新重新开始")
                        return
                    }

                    var index = Math.floor(Math.random() * this.list.length)
                    this.userName  = this.list[index]
                    this.list.splice(index, 1)
                }
            }
        })


    </script>



</body>
</html>
